<template>
  <view class="scroll-tab-container">
    <!-- Scrollable tab bar -->
    <scroll-view 
      class="scroll-tab" 
      scroll-x 
      show-scrollbar="false"
      :scroll-with-animation="true"
    >
      <view class="tab-wrapper">
        <!-- Dynamic tab items -->
        <view 
          v-for="(item, index) in tabList" 
          :key="index"
          class="tab-item"
          :class="{ 'active': activeIndex === index }"
          @click="handleTabClick(index)"
        >
          {{ item }}
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: "ScrollTab",
  props: {
    // Dynamic tab data (passed from parent component)
    tabList: {
      type: Array,
      required: true,
      default: () => []
    },
    // Default active tab index
    defaultActive: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      activeIndex: this.defaultActive
    };
  },
  watch: {
    defaultActive(newVal) {
      this.activeIndex = newVal;
    }
  },
  methods: {
    handleTabClick(index) {
      this.activeIndex = index;
      // Emit event to parent component with selected tab info
      this.$emit('tabChange', {
        index,
        value: this.tabList[index]
      });
    }
  }
};
</script>

<style scoped>
.scroll-tab-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px; /* Adjust height as needed */
  background-color: #ffffff; /* Background color */
  z-index: 999; /* Ensure it stays on top */
  border-bottom: 1px solid #eee; /* Optional bottom border */
}

.scroll-tab {
  width: 100%;
  height: 100%;
  white-space: nowrap; /* Important for horizontal scroll */
}

.tab-wrapper {
  display: inline-flex;
  height: 100%;
  
}

.tab-item {
  padding: 0 12px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px; /* Text size */
  color: #333333; /* Default text color */
  margin: 0 4px;
}

/* Active tab style */
.tab-item.active {
  color: #e53a3a; /* Active text color - matches your red example */
  font-weight: bold;
  position: relative;
}

/* Optional active indicator */
.tab-item.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  background-color: #e53a3a; /* Active indicator color */
  border-radius: 3px;
}

</style>